import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import {CSSTransition} from 'react-transition-group'
import { Link } from 'react-router-dom'
import {actionCreators} from './store'
import {HeaderWrapper, Logo, Nav, NavItem, SearchWrapper, NavSearch, Addition, Button, SearchInfo, SearchInfoTitle, SearchInfoSwitch, SearchInfoList, SearchInfoItem} from './style'


class Header extends PureComponent {
  getListArea(){
    const {list, page, focused, mouseIn,handleMouseEnter, handleMouseLeave, handlePageChange} = this.props
    if(focused || mouseIn){
      const pageList = []
      for(let i = (page-1) *10; i< page*10 && list.get(i); i++){
        pageList.push(list.get(i))
      }
      return (
        <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => handlePageChange(this.spinIcon)}><i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe64f;</i>换一批</SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {
              pageList.map((item) => {
                return <SearchInfoItem key={item}>{item}</SearchInfoItem>
              })
            }
          </SearchInfoList>
        </SearchInfo>
      )
    }else{
      return null
    }
  }
  render() {
    const {focused, handleInputFocus, handleInputBlur, list} = this.props
    return (
      <HeaderWrapper>
        <Link to="/">
          <Logo />
        </Link>
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载APP</NavItem>
          <NavItem className="right">
            <i className="iconfont">&#xe636;</i>
          </NavItem>
          <NavItem className="right">登陆</NavItem>
          <Addition>
            <Button className="writting"><i className="iconfont">&#xe77b;</i>写文章</Button>
            <Button className="reg">注册</Button>          
          </Addition>
          <SearchWrapper>
            <CSSTransition
              in={focused}
              timeout={200}
              classNames="slide"
            >
              <NavSearch 
                className={focused ? 'focused' : ''}
                onFocus={() => handleInputFocus(list)}
                onBlur={handleInputBlur}
              />
            </CSSTransition>
            <i className="iconfont zoom">&#xe694;</i>
            {this.getListArea()}
          </SearchWrapper>
        </Nav>
      </HeaderWrapper>
    )
  }
}

const mapStateToprops = (state) => {
  return {
    focused: state.getIn(['header', 'focused']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    page: state.getIn(['header', 'page']),
    list: state.getIn(['header', 'list'])
  }
}
const mapDispathToprops = (dispath) => {
  return {
    handleInputFocus(list){
      (list.size===0) && dispath(actionCreators.getList())
      dispath(actionCreators.searchFocus())
    },
    handleInputBlur(){
      dispath(actionCreators.searchBlur())
    },
    handleMouseEnter(){
      dispath(actionCreators.mouseEnter())
    },
    handleMouseLeave(){
      dispath(actionCreators.mouseLeave())
    },
    handlePageChange(icon){
      let originAngle = icon.style.transform.replace(/[^0-9]/ig,'')
      if(originAngle){
        originAngle = parseInt(originAngle, 10)
      }else{
        originAngle = 0
      }
      console.log(originAngle)
      icon.style.transform = 'rotate('+(originAngle+360)+'deg)'
      dispath(actionCreators.pageChange())
    }
  }
}

export default connect(mapStateToprops, mapDispathToprops)(Header);